<template>
  <div class="problemDialog" v-if="videoObserveDialog">
    <div class="dialogTitle">
      <div>视频监测报警</div>
      <img src="@/assets/index/关  闭.png" alt="" @click="closeHiddenTrouble" />
    </div>
    <div class="dialogForm">
      <el-input
        placeholder="关联设备"
        v-model="videoObserveParams.videoEquipment"
      ></el-input>
      <el-select
        class="selectBox"
        v-model="videoObserveParams.videoGrade"
        placeholder="报警类型"
      >
        <el-option
          v-for="item in options5"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button
        class="searchBtn"
        type="primary"
        @click="searchVideoObserveData"
        >查询</el-button
      >
      <el-button class="resetBtn" @click="resetVideoObserveData"
        >重置</el-button
      >
      <!-- <el-button class="resetBtn" @click="addVideoObserveData">新增</el-button> -->
    </div>
    <div class="formBox">
      <el-table
        :data="VideoObserveData"
        style="width: 100%"
        :header-row-style="{
          backgroundColor: '#2A3533',
          color: '#fff',
          borderBottom: '1px solid #022627',
          height: '36px',
          fontSize: '18px',
          textAlign: 'center',
        }"
        :header-cell-style="{
          backgroundColor: '#2A3533',
          color: '#fff',
          borderBottom: '1px solid #022627',
          height: '36px',
          padding: '7px 0',
          textAlign: 'center',
        }"
        :row-style="{
          backgroundColor: 'transparent',
          color: '#ffffff',
          borderBottom: '1px solid #022627',
          height: '36px',
          fontSize: '18px',
          textAlign: 'center',
        }"
        :cell-style="{
          borderBottom: '1px solid #022627',
          height: '36px',
          padding: '3px 0',
          textAlign: 'center',
        }"
      >
        <el-table-column prop="videoAddress" label="监测点位">
        </el-table-column>
        <el-table-column prop="videoEquipment" label="关联设备">
        </el-table-column>
        <el-table-column prop="checkResponerStatus" label="报警类型">
          <template slot-scope="scope">
            <div
              :class="{
                blueC: scope.row.videoGrade == 1,
                greenC: scope.row.videoGrade == 2,
              }"
            >
              {{ scope.row.videoGradeName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="videoAlarmTime" label="报警时间">
        </el-table-column>
        <!-- <el-table-column prop="createdTime" label="报警次数">
          <template slot-scope="scope">
            <div>{{ scope.row.dangerGradeName }}次</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="gasStatus" label="相关照片">
          <template slot-scope="scope">
            <div>
              <el-image
                style="width: 100px; height: 50px"
                :src="scope.row.url"
                :preview-src-list="scope.row.srcList"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="gasData" label="操作">
          <template slot-scope="scope">
            <div class="formBoxHandle">
              <div @click="goHiddenDetail(scope.row)" style="cursor: pointer">
                {{ scope.row.gasStatus == 0 ? '详情' : '详情' }}
              </div>
              <div
                @click="editHiddenDetail(scope.row)"
                style="cursor: pointer"
                class="edit"
              >
                编辑
              </div>
           
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="pageBox">
      <el-pagination
        :background="false"
        layout="total,prev, pager, next"
        :total="videoObserveTotal"
        @current-change="currentVideoObserve"
        :page-size="videoObserveParams.pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { options5 } from '@/utils/dictionary'
import { videoDetectionPageApi } from '@/api'
export default {
  name: 'videoObserve',
  props: {
    videoObserveDialog: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      videoObserveParams: {
        pageNum: 1,
        pageSize: 10,
        videoEquipment: '',
        videoGrade: '',
      },
      options5,
      VideoObserveData: [],
      videoObserveTotal: null,
    }
  },
  methods: {
    closeHiddenTrouble() {
      this.$emit('update:videoObserveDialog', false)
      this.videoObserveParams = {
        pageNum: 1,
        pageSize: 10,
        videoEquipment: '',
        videoGrade: '',
      }
    },
    searchVideoObserveData() {
      this.videoPage()
    },
    resetVideoObserveData() {
      this.videoObserveParams = {
        pageNum: 1,
        pageSize: 10,
        videoEquipment: '',
        videoGrade: '',
      }
      this.videoPage()
    },
    addVideoObserveData() {},
    goHiddenDetail() {},
    editHiddenDetail() {},
    deleteHiddenDetail() {},
    currentVideoObserve(pageNum) {
      this.videoObserveParams.pageNum = pageNum
    },
    async videoPage() {
      const res = await videoDetectionPageApi({
        pageNum: this.videoObserveParams.pageNum,
        pageSize: this.videoObserveParams.pageSize,
        videoEquipment: this.videoObserveParams.videoEquipment,
        videoGrade: this.videoObserveParams.videoGrade,
      })
      this.videoObserveTotal = res.data.total

      this.VideoObserveData = res.data.records.map((item) => {
        return {
          ...item,
          srcList: [item.dangerImg1, item.dangerImg2, item.dangerImg3].filter(
            (url) => url
          ),
        }
      })
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.problemDialog {
  background-image: url('@/assets/index/色相／饱和度 1 拷贝.png');
  width: 1080px;
  height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 60px 63px 30px;
  .dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  .dialogForm {
    display: flex;
    margin-top: 20px;
    input::placeholder {
      color: #e8f0ef; /* 你可以根据需要修改颜色值 */
      opacity: 1; /* 有些浏览器默认placeholder的透明度较低，可以设置为1使其不透明 */
    }
    input {
      color: #fff !important; /* 你可以根据需要修改颜色值 */
    }
    .el-input {
      width: 240px;
      margin-right: 24px;
    }
    ::v-deep .el-input__inner {
      background-color: transparent !important;
      border-radius: 4px;
      border: 1px solid #3f5b56;
      width: 240px;
      color: #fff !important;
    }
    /* 为 .custom-time-picker 类添加的 .el-date-editor 元素设置背景色和边框 */
    .custom-time-picker {
      background-color: transparent !important; /* 设置背景颜色 */
      border: 1px solid #3f5b56;

      ::v-deep .el-range-input {
        background-color: transparent !important; /* 设置背景颜色 */
      }
    }
    .selectBox {
      width: 200px;
      margin: 0 24px;
      ::v-deep .el-input__inner {
        background-color: transparent !important;
        border-radius: 4px;
        border: 1px solid #3f5b56;
        width: 200px;
        color: #fff !important;
      }
    }
    .searchBtn {
      background-color: #008870;
      color: #fff;
      border: 1px solid #008870;
    }
    .resetBtn {
      background-color: transparent;
      color: #fff;
      border: 1px solid #3f5b56;
    }
  }
  .formBox {
    padding: 26px 0 0;
    .formTitle {
      background-color: #20374f;
      height: 36px;
      line-height: 36px;
      display: flex;
      .titleOne {
        width: 25%;
        text-align: center;
        color: #fff;
      }
    }

    .formItem {
      background-color: transparent;
      border-bottom: 1px solid #334961;
    }
    ::v-deep .el-table,
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    ::v-deep .el-table__body {
      tr:hover > td {
        background-color: #0d325e !important;
      }
    }

    .greenC {
      color: #30fbdd;
    }
    .redC {
      color: #ff3057;
    }
    .yellowC {
      color: #ffd321;
    }
    .blueC {
      color: rgb(39, 193, 217);
    }
    .formBoxHandle {
      display: flex;
      justify-content: center;
      color: #28e0bf;
      .edit {
        margin: 0 10px;
      }
    }
  }
  .pageBox {
    padding-top: 10px;
    width: 100%;
    text-align: center;
    ::v-deep .el-pagination__total {
      color: #fff !important;
    }
  }
}
.addVehicleDialog {
  width: 544px !important;
  height: 480px;
  background: #172526;
  box-shadow: 0px 6px 32px 0px rgba(7, 78, 82, 0.5);
  border-radius: 16px;
  border: 1px solid #297073;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  .addVehicleTitle {
    display: flex;
    justify-content: space-between;
    padding: 24px 32px;
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    img {
      display: flex;
      width: 12px;
      height: 12px;
      cursor: pointer;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    .confirmBtn {
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: #008870;
      border-radius: 4px;
      margin-right: 24px;
      cursor: pointer;
    }
    .cancelBtn {
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: transparent;
      border: 1px solid #8bc0b7;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保遮罩层在最前面 */
}
</style>
